<template>
<div style="margin-left: 20px">
  <h1>药品列表</h1>
  <div>
    <el-form :inline="true" :model="search" class="demo-form-inline">
      <el-form-item label="药品">
        <el-input v-model="search.title" placeholder="请输入药品名" />
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="search.type" placeholder="请选择生产厂家">
          <el-option label="全部" value="全部" />
          <el-option label="阿里大药房" value="阿里大药房" />
          <el-option label="京东大药房" value="京东大药房" />
          <el-option label="同仁堂大药房" value="同仁堂大药房" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadData">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table :data="medications">
      <el-table-column fixed prop="mid" label="序号" width="100" />
      <el-table-column prop="mname" label="药品名" width="220" />
      <el-table-column prop="mfacturer" label="生产厂家" width="120" />
      <el-table-column prop="price" label="价格" width="200" />
      <el-table-column prop="ctime" label="生产日期" width="200"/>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="openUpdate(scope.row)">修改</el-button>
          <el-button type="danger" size="small" @click="del(scope.row.mid,scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div style="float: right;margin-right: 30px;margin-top: 20px">
    <el-pagination background layout="prev, pager, next" :total="total" />
  </div>
  <div>
    <el-dialog title="修改药品信息" :visible.sync="dialog">
      <el-form :model="medication" label-width="120px">
        <el-form-item label="药品名">
          <el-input v-model="medication.mname" :disabled="true"/>
        </el-form-item>
        <el-form-item label="生产厂家">
          <el-input v-model="medication.mfacturer" />
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="medication.price" ></el-input>
        </el-form-item>
        <el-form-item label="生产日期">
          <el-date-picker v-model="medication.ctime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择生产日期" style="width: 100%;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定 修 改</el-button>
      </div>
    </el-dialog>
  </div>
</div>
</template>

<script>
import request from '@/utils/request'
export default {
  data(){
    return{
      medications:[],
      total:10,
      search:{
        type:"",
        title:"",
        page:1,
        size:10
      },
      medication:{},
      dialog:false
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      //请求接口 axios get 键值对
      request({
        // ?type="+this.search.type+"&title="+this.search.title+"&page="+this.search.page+"&size="+this.search.size,
        url: "api/medication/all.do",
        method: 'get',
        params: this.search
      }).then(res => {
        console.log(res);
        if (res.code == 0) {
          this.medications = res.data.list;
          this.total = res.data.size;
        }
      })
    },
    getage(row, column) {
      const date = row[column.property]
      console.log(date);
      const d1=new Date().getFullYear();
      console.log()
      const d2=Number.parseInt(date.substr(0,4));
      return d1-d2;
    },
    del(mid,index) {
      var msg = "您真的确定要删除吗？\n\n请确认！";
      if (confirm(msg)==true) {
        //请求接口 删除数据
        request({
          url: "api/medication/del.do",
          method: 'post',
          data:{mid: mid}
        }).then(res => {
          if (res.code == 0) {
            //删除数组的那一列
            this.medications.splice(index, 1)
          }
        })
      }
    },
    openUpdate(obj) {
      this.medication=obj;
      this.dialog=true;
    },
    update() {
      //请求接口 修改数据
      request({
        url: "api/medication/update.do",
        method: 'post',
        data: this.medication
      }).then(res => {
        if (res.code == 0) {
          this.dialog = false;
          this.loadData();
        }
      })
    }
  }
}

</script>

<style scoped>

</style>
